<script setup lang="ts">
import HeadingJPEG from '@/assets/heading.jpeg'
import { useAppStore } from '@/stores/app'
import { useNewLotteryStore } from '@/stores/newlottery'
import IconLeftOutlined from './icons/IconLeftOutlined.vue'
import IconRightOutlined from './icons/IconRightOutlined.vue'

const appStore = useAppStore()
const newLotteryStore = useNewLotteryStore()
const lottery = newLotteryStore.lottery

// 切换奖项
const handlePrevPrize = async () => {
  await newLotteryStore.setPreviousPrizeLevelToCurrent()
  appStore.setPreviousPrizeLevelToCurrent()
}

const handleNextPrize = async () => {
  await newLotteryStore.setNextPrizeLevelToCurrent()
  appStore.setNextPrizeLevelToCurrent()
}
</script>

<template>
  <div class="flex flex-col justify-center select-none">
    <div class="relative flex justify-center pt-4 mb-4">
      <img
        class="w-96 3xl:w-112 4xl:w-144 h-12 3xl:h-16 4xl:h-20 object-contain"
        :src="HeadingJPEG"
      />
      <div class="absolute flex justify-center items-center">
        <button class="w-12 3xl:w-24 4xl:w-36 mr-2 text-gray-400" @click.stop="handlePrevPrize">
          <IconLeftOutlined />
        </button>
        <span class="text-sm 3xl:text-lg 4xl:text-2xl text-[#ffe800]">
          {{ newLotteryStore.getCurrentPrizeLevel() }}
        </span>
        <button class="w-12 3xl:w-24 4xl:w-36 ml-2 text-gray-400" @click.stop="handleNextPrize">
          <IconRightOutlined />
        </button>
      </div>
    </div>
    <div class="text-center flex justify-center">
      <div class="text-[#ffe800] text-2xl 3xl:text-3xl 4xl:text-4xl w-2/3">
        {{ newLotteryStore.getCurrentPrizeName() }}
      </div>
    </div>
  </div>
</template>

<style scoped>
button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

button:not(:disabled):hover {
  @apply scale-110;
  transition: transform 0.2s ease;
}
</style>
